<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_员工表格练习</title>
</head>
<body>
<input type="text" placeholder="请输入员工姓名" id="i1">
<input type="text" placeholder="请输入员工工资" id="i2">
<input type="text" placeholder="请输入员工岗位" id="i3">
<input type="button" value="添加员工" onclick="add()"> <br>

<table border="1">
  <caption>员工表</caption>
      <tr>
        <th><u>姓名</u></th>
        <th><u>工资</u></th>
        <th><u>岗位</u></th>
      </tr>
    <tbody>
    </tbody>
</table>

<script>
    let arr = [];

    function add(){
        let name=document.getElementById('i1').value;
        let salary=document.getElementById("i2").value;
        let job=document.getElementById("i3").value;


        let tr=document.createElement("tr");
        let td1=document.createElement("td");
        let td2=document.createElement("td");
        let td3=document.createElement("td");

        td1.innerText=name;
        td2.innerText=salary;
        td3.innerText=job;

        tr.append(td1,td2,td3);

        let table =document.querySelector('table')
        table.append(tr);

        document.getElementById('i1').value='';
        document.getElementById('i2').value='';
        document.getElementById('i3').value='';

        arr.push({
            name: td1,
            salary: td2,
            job: td3 });
    }
    console.log(arr);
</script>
</body>
</html>